<template>
    <div>
        swiper
        <!--添加v-if 等datalist拿到数据后才开始渲染 -->
        <MySwiper v-if="datalist.length" :slides-per-view="1" :space-between="50" :loop="222" @myslidechange="handleChange">
            <MySwiperItem v-for="data in datalist" :key="data">{{data}}</MySwiperItem>
        </MySwiper>
    </div>
</template>

<script>
import MySwiper from './MySwiper.vue'
import MySwiperItem from './MySwiperItem.vue'
export default {
    components: {
        MySwiper,
        MySwiperItem,
    },
    data() {
        return {
            datalist:[],
        }
    },
    mounted() {
        setTimeout(() => { 
            this.datalist = ['1', '2', '3', '4']
        }, 2000)
    },
    methods: {
        handleChange(index) {
            console.log('change', index)
        }
    }
}
</script>